 <style type="text/css" media="all">
     body {
  background: rgba(0, 0, 0, 0.5);
}

.box {

  overflow-y: auto;

  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
    padding: 20px;
}

.cur-state {
  font-size: 16px;
  font-weight: bold;
  color: #00CE9B;
  padding: 20px 0 0 24px;
}

.state-box {
  display: flex;
  justify-content: space-around;
  width: 588px;
  margin: auto;
  margin-top: 16px;
  padding: 0 24px;
}

.state-time-box {
  display: flex;
  justify-content: space-around;
  width: 683px;
  /* width: 588px; */
  margin: auto;
  margin-top: 3px;
  padding: 0 24px;
  text-align: center;
}

.state-time {
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  width: 133px;
}

.each-state {
  width: 50px;
}

.state-img {
  width: 16px;
  height: 16px;
  /* background: #00CE9B; */
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  display: block;
  margin: auto;
}

.state-text {
  font-size: 12px;
  margin-top: 8px;
  font-weight: 400;
  text-align: center;
  color: #999999;
}

.cur-text {
  color: #00CE9B;
}

.wire {
  width: 70px;
  height: 0px;
  opacity: 1;
  border: 1px solid #DCDEE5;
  margin-top: 6px;
}

.gap1 {
  width: 100%;
  height: 8px;
  background: #F1F4F6;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin-top: 28px;
}


/* 订单信息 */
.order-info-box {
  padding: 20px 24px;
}

.title {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}

.order-info-head {
  display: flex;
  border-top: 1px solid #EEEEEE;
  border-left: 1px solid #EEEEEE;
  border-right: 1px solid #EEEEEE;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  line-height: 40px;
  margin-top: 16px;
}

.order-info-head-text-3 {
  flex: 3;
  text-align: center;
}

.order-info-head-text-2 {
  flex: 1;
  text-align: center;
}

.order-info-matter {
  display: flex;
  border: 1px solid #EEE;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  line-height: 40px;
}

.gap2 {
  width: 100%;
  height: 8px;
  background: #F1F4F6;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  /* margin-top: 28px; */
}


/* 项目信息 */
.item-info-box {
  padding: 20px 24px;
}

.title {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}

.item-info-head {
  display: flex;
  border-top: 1px solid #EEEEEE;
  border-left: 1px solid #EEEEEE;
  border-right: 1px solid #EEEEEE;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  line-height: 40px;
  margin-top: 16px;
}

.item-info-head-text-5 {
  flex: 4;
  text-align: center;
}

.item-info-head-text-2 {
  flex: 2;
  text-align: center;
}

.item-info-head-text-1 {
  flex: 2;
  text-align: center;
}


.serve-list {
  display: flex;
  height: 58px;
  align-items: center;
  padding-left: 16px;
}

.item-info-matter-text-4 {
  flex: 4;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border-right: 1px solid #EEEEEE;
}

.item-info-matter-text-2 {
  flex: 2;
  text-align: center;
  line-height: 58px;
}

.border-lr {
  border-left: 1px solid #EEEEEE;
  border-right: 1px solid #EEEEEE;
}

/* .item-info-matter-text-1 {
  flex: 2;
  text-align: center;
} */
.item-info-matter {
  display: flex;
  border: 1px solid #EEE;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  line-height: 40px;
}

.item-info-matter-img {
  width: 38px;
  height: 38px;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin-right: 12px;
}

.increase {
  width: 32px;
  height: 18px;
  background: #EDEEF1;
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  font-weight: 400;
  color: #A4A9B7;
  margin-left: 8px;
}



/* right-box */
.right-box {
  /* float: right; */
  padding: 0 24px;
}

.right-1 {
  display: flex;
  justify-content: right;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}

.discount {
  background: #2C2B31;
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: #F6E0B9;
  padding: 1px 5px;
}

.yhq {
  font-size: 14px;
  margin-left: 32px;
  font-weight: 400;
  color: #333333;
}

.yhq-money {
  color: #FF1F2B;
}

.cj {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  margin-left: 32px;
}

.cj-money {
  color: #FFA600;
}

.right-2 {
  display: flex;
  justify-content: right;
  margin-top: 10px;
}

.right-3 {
  display: flex;
  justify-content: right;
  height: 27px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 16px;
  margin-top: 14px;
}

.heji-money {
  color: #FF1F2B;
  font-size: 18px;
}


.serve-title {
  font-size: 14px;
  padding: 24px 0 0 20px;
  font-weight: bold;
  color: #333333;
}



/* 服务者信息 */
.user-info {
  display: flex;
  padding: 17px 24px 0 20px;
}

.user-img {
  width: 48px;
  height: 48px;
  background: #D9D9D9;
  border-radius: 30px 30px 30px 30px;
  opacity: 1;
  margin-right: 10px;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
}

.user-mobile {
  font-size: 14px;
  margin-top: 8px;
  font-weight: 400;
  color: #666666;
}

.info-r-text {
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 0 0 20px;
}

.field {
  color: #999;
}

.server-box {
  display: flex;
}

.serve-l {
  flex: 3;
}

.serve-r {
  flex: 4;
  display: flex;
  justify-content: space-around;
}

.gap3 {
  width: 100%;
  height: 8px;
  background: #F1F4F6;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin-top: 20px;
}



/* 佣金 */
.item-info-yj-text-1 {
  flex: 1;
  text-align: center;
}

.border-l {
  border-left: 1px solid #EEEEEE;
}

.text-red {
  color: #FF1F2B;
}


div::-webkit-scrollbar {
  width: 4px;
}
/* // 滚动条轨道 */
div::-webkit-scrollbar-track {
  background: #FFF;
  border-radius: 2px;
}
/* // 小滑块 */
div::-webkit-scrollbar-thumb {
  background: #D9D9D9;
  border-radius: 10px;
}



.titles{
    font-size: 14px;
}
.img-box{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.photo{
    width: 100px;
    height: 100px;
    margin: 0 8px 8px 0;
}
 </style>
  <div class="box">
    
    <div class="state-box">
       {eq name="order.to_shop" value="door"} 
      <div class="each-state">
        <!-- <div class="state-img"></div> -->
        {gt name="order.status" value="1"}
        <img class="state-img" src="__CDN__/assets/addons/service/image/Vector.png" alt="">
        <div class="state-text cur-text">已接单</div>
        {/gt}
        {elt name="order.status" value="1"}
        <img class="state-img" src="__CDN__/assets/addons/service/image/check2.png" alt="">
        <div class="state-text">已接单</div>
        {/elt}
        
        
      </div>
      <div class="wire"></div>
      <div class="each-state">
            {gt name="order.status" value="2"}
        <img class="state-img" src="__CDN__/assets/addons/service/image/Vector.png" alt="">
        <div class="state-text cur-text">已出发</div>
        {/gt}
        {elt name="order.status" value="2"}
        <img class="state-img" src="__CDN__/assets/addons/service/image/check2.png" alt="">
         <div class="state-text">已出发</div>
        {/elt}

       
      </div>
      <div class="wire"></div>
      <div class="each-state">
         {gt name="order.status" value="3"}
        <img class="state-img" src="__CDN__/assets/addons/service/image/Vector.png" alt="">
        <div class="state-text cur-text">已到达</div>
        {/gt}
        {elt name="order.status" value="3"}
        <img class="state-img" src="__CDN__/assets/addons/service/image/check2.png" alt="">
        <div class="state-text">已到达</div>
        {/elt}
        
      </div>
      <div class="wire"></div>
      <div class="each-state">
         {gt name="order.status" value="4"}
        <img class="state-img" src="__CDN__/assets/addons/service/image/Vector.png" alt="">
        <div class="state-text cur-text">开始服务</div>
        {/gt}
        {elt name="order.status" value="4"}
        <img class="state-img" src="__CDN__/assets/addons/service/image/check2.png" alt="">
        <div class="state-text">开始服务</div>
        {/elt}
        
      </div>
      <div class="wire"></div>
      <div class="each-state">
         {gt name="order.status" value="5"}
        <img class="state-img" src="__CDN__/assets/addons/service/image/Vector.png" alt="">
        <div class="state-text cur-text">服务完成</div>
        {/gt}
        {elt name="order.status" value="5"}
        <img class="state-img" src="__CDN__/assets/addons/service/image/check2.png" alt="">
        <div class="state-text">服务完成</div>
        {/elt}
        
      </div>
      {/eq}
      {eq name="order.to_shop" value="shop"}
    
        
      <div class="each-state">
        <!-- <div class="state-img"></div> -->
        {gt name="order.status" value="1"}
        <img class="state-img" src="__CDN__/assets/addons/service/image/Vector.png" alt="">
        <div class="state-text cur-text">待核销</div>
        {/gt}
        {elt name="order.status" value="1"}
        <img class="state-img" src="__CDN__/assets/addons/service/image/check2.png" alt="">
        <div class="state-text">待核销</div>
        {/elt}
        
        
      </div>
      <div class="wire"></div>
      <div class="each-state">
            {gt name="order.status" value="2"}
        <img class="state-img" src="__CDN__/assets/addons/service/image/Vector.png" alt="">
        <div class="state-text cur-text">已核销</div>
        {/gt}
        {elt name="order.status" value="2"}
        <img class="state-img" src="__CDN__/assets/addons/service/image/check2.png" alt="">
         <div class="state-text">已核销</div>
        {/elt}

       
      </div>
      
      {/eq}
    </div>



    <div class="gap1"></div>
    <!-- 订单信息 -->
    <div class="order-info-box">
      <div class="title">订单信息</div>
      <div class="order-info-head">
        <div class="order-info-head-text-3">订单编号</div>
        <div class="order-info-head-text-3">下单时间</div>
        <div class="order-info-head-text-2">支付方式</div>
        <div class="order-info-head-text-3">支付时间</div>
      </div>

      <div class="order-info-matter">
        <div class="order-info-head-text-3">{$order.orderId}</div>
        <div class="order-info-head-text-3">{$order.createtime|date="y-m-d h:i",###}</div>
        <div class="order-info-head-text-2">{switch $order.paytype}
            {case 0}微信小程序{/case}
            {case 4}余额{/case}
            {/switch}</div>
        <div class="order-info-head-text-3">{$order.paytime|date="y-m-d h:i",###}</div>
      </div>
    </div>

    <div class="gap2"></div>
    <div class="item-info-box">
      <div class="title">订单信息</div>
      <div class="item-info-head">
        <div class="item-info-head-text-5">详情</div>
        <div class="item-info-head-text-2">规格</div>
        <div class="item-info-head-text-1">数量</div>
        <div class="item-info-head-text-2">价格（元）</div>
      </div>

      <div class="item-info-matter">
        <div class="item-info-matter-text-4 serve-list">
          <img class="item-info-matter-img" src="{$detail.image}" alt="">
          <span>{$detail.name}</span>
        </div>
        <div class="item-info-matter-text-2">{$detail.sku_name}</div>
        <div class="item-info-matter-text-2 border-lr">{$detail.num}</div>
        <div class="item-info-matter-text-2">￥{$detail.price}</div>
      </div>
      {volist name="addList" id="vo"}
      <div class="item-info-matter">
        <div class="item-info-matter-text-4 serve-list">
          <span>{$vo.name}</span>
          <span class="increase">加项</span>
        </div>
        <div class="item-info-matter-text-2">{$vo.cost_seconds}分钟</div>
        <div class="item-info-matter-text-2 border-lr">{$vo.num}</div>
        <div class="item-info-matter-text-2">￥{$vo.price}</div>
      </div>
      {/volist}
    </div>


    <!-- right -->
    <div class="right-box">
      <div class="right-1">
        <div class="">
          折扣
        </div>
        <div class="">
          ￥{$order.goods_total_price}
          <span class="discount">{$order.discount/10}折</span>
        </div>
        <div class="yhq">
          优惠券抵扣：<span class="yhq-money">-￥{$order.coupon_price}</span>
        </div>
      </div>
      <div class="right-2">
        <div class="cj">
          补差金额：<span class="cj-money">￥{$order.premium_price}</span>
        </div>
        <div class="cj">
          加项金额：<span class="cj-money">￥{$order.add_price}</span>
        </div>
        <div class="yhq">
          出行费用：￥{$order.travel_price}
        </div>
      </div>
      <div class="right-3">
        <div>
          合计：
          <span class="heji-money">￥{$order.payprice}</span>
        </div>
      </div>
    </div>



    <!-- 服务者信息 -->
    <div class="gap3"></div>
    <div class="server-box">
    {switch name="to_shop" }
    {case value="door"}
      <div class="serve-l">
        <div class="serve-title">上门服务</div>
        <div class="user-info">
          <img class="user-img" src="{$user.avatar}" />
          <div>
            <div class="user-name">{$user.nickname}</div>
            <div class="user-mobile">{$user.mobile}</div>
          </div>
        </div>
        <div class="info-r-text">
          <span class="field">联系人：</span>{$address.name}&nbsp;&nbsp; 
            {switch $address.sex}
            {case 0}女士{/case}
            {case 1}男士{/case}
            {/switch}
            &nbsp;&nbsp;{$address.mobile}
        </div>
        <div class="info-r-text">
          <span class="field">服务时间：</span>{$order.starttime|date="y-m-d h:i",###}
        </div>
        <div class="info-r-text">
          <span class="field">服务地址：</span>{$address.province}{$address.city}{$address.district}{$address.area}{$address.address}
        </div>
        <div class="info-r-text">
          <span class="field">备注：</span>备注：备注备注备注备注
        </div>
      </div>
    {/case}
    {case value="shop"}
     <div class="serve-l">
        <div class="serve-title">到店核销</div>
        <div class="user-info">
          
          <div>
            <div class="user-name">{$shop.name}</div>
            <div class="user-mobile">{$shop.leader_mobile}</div>
          </div>
        </div>
        <div class="info-r-text">
          <span class="field">服务地址：</span>{$shop.province}{$shop.city}{$shop.district}{$shop.address}
        </div>
        <div class="info-r-text">
          <span class="field">备注：</span>备注：备注备注备注备注
        </div>
        <div class="info-r-text">
          <span class="field">核销码：</span>{$order.check_name}
          <img src="{$order.qrcode_image}" alt="" width="70px" height="70px" />
        </div>
         
      </div>
      {/case}
      {/switch}
      <div class="serve-r">
          {notempty name="skill" }
        <div>
          <div class="serve-title">服务信息</div>
          <div class="user-info">
            <img src="{$skill.image}" alt="" class="user-img" />
            <div>
              <div class="user-name">{$skill.name}</div>
              <div class="user-mobile">{$skill.mobile}</div>
            </div>
          </div>
        </div>
         {/notempty}
        {notempty name="shop" }
        <div>
          <div class="serve-title">门店信息</div>
          <div class="user-info">
            
            <div>
              <div class="user-name">{$shop.name}</div>
              <div class="user-mobile">{$shop.leader_mobile}</div>
            </div>
          </div>
        </div>
        {/notempty}
      </div>
    </div>
    {eq name="order.to_shop" value="door"}
    {gt name="order.status" value="3"}
    <div class="gap3"></div>
    <div class="item-info-box">
        <div class="title">服务照片</div>
        <div class="titles">
            已到达
        </div>
        <div class="img-box">
            {volist name="order.reach_images" id="vb"}
            <img class="photo" src="{$vb}" alt="" />
            {/volist}

        </div>
        {gt name="order.status" value="5"}
        <div class="titles">
            已完成
        </div>
        <div class="img-box">
            {volist name="order.finish_images" id="vb"}
            <img class="photo" src="{$vb}" alt="" />
            {/volist}
        </div>
        {/gt}
    </div>
    {/gt}
    {/eq}

    <!-- 佣金信息 -->
    <div class="gap3"></div>
    <div class="item-info-box">
      <div class="title">结算信息</div>
      <div class="item-info-head">
        <div class="item-info-yj-text-1">支付总金额</div>
        <div class="item-info-yj-text-1">退款金额</div>
        <div class="item-info-yj-text-1">结算车费</div>
        <div class="item-info-yj-text-1">结算金额</div>
        <div class="item-info-yj-text-1">服务者佣金</div>
        <div class="item-info-yj-text-1">商户佣金</div>
      </div>

      <div class="item-info-matter">
        <div class="item-info-yj-text-1">￥{$order.payprice}</div>
        <div class="item-info-yj-text-1 border-l">-￥{$order.refund_price}</div>
        <div class="item-info-yj-text-1 border-l">￥{$order.act_travel_price}</div>
        <div class="item-info-yj-text-1 border-l">￥{$order.settle_price}</div>
        {neq name="order.is_settle" value="2"}
        <div class="item-info-yj-text-1 border-l text-red">待结算</div>
        <div class="item-info-yj-text-1 border-l text-red">待结算</div>
        {/neq}
        {eq name="order.is_settle" value="2"}
        <div class="item-info-yj-text-1 border-l text-red">￥{$skillRebate}</div>
        <div class="item-info-yj-text-1 border-l text-red">￥{$shopRebate}</div>
        {/eq}
      </div>
    </div>
    
    <div class="gap3"></div>
    <div class="item-info-box">
      <div class="title">日志</div>
      <div class="item-info-head">
        <div class="item-info-yj-text-1">订单状态</div>
        <div class="item-info-yj-text-1">操作</div>
        <div class="item-info-yj-text-1">时间</div>

      </div>
        {volist name="logList" id="vb"}
      <div class="item-info-matter">
        <div class="item-info-yj-text-1">{switch vb.type}
            {case 0}创建订单{/case}
            {case 1}已支付{/case}
            {case 2}服务者已接单{/case}
            {case 3}已出发{/case}
            {case 4}已到达{/case}
            {case 5}服务中{/case}
            {case 6}已完成{/case}
            {case 7}已评价{/case}
            {case 8}申请退款{/case}
            {case 9}已退款{/case}
            {case 10}申请退款拒绝{/case}
            {case 11}订单投诉{/case}
            {case 12}订单补差价{/case}
            {case 13}订单添加附加项目{/case}
            {case 14}订单已分配{/case}
            {case 15}商户已接单{/case}
            {case 16}平台已分配{/case}
            {case 17}用户取消申请退款{/case}
            {case 18}订单投诉已处理{/case}
            {/switch}</div>
        <div class="item-info-yj-text-1 border-l">{$vb.content}</div>
        <div class="item-info-yj-text-1 border-l">{$vb.createtime|date="y-m-d h:i",###}</div>

      </div>
      {/volist}
    </div>
  </div>
    <div class="hide layer-footer">
    </div>